<template>
  <div>
    <Box :caption="caption">
      <div
        class="transmission__config"
        v-if="$route.path === '/configManage/transmissionConfig'"
      >
        <!-- 搜索栏、新增按钮 -->
        <div class="top">
          <el-input
            v-model="search"
            placeholder="请输入传输配置名称"
            @keyup.enter.native="transSearch"
            prefix-icon="el-icon-search"
            clearable
            @clear="reset"
          ></el-input>
          <el-button class="search" @click="transSearch"><i class="el-icon-search"></i>搜索</el-button>
          <el-button
            class="add right"
            @click="
              () => {
                $router.push('/configManage/transmissionAdd');
              }
            "
            ><i class="el-icon-plus"></i>新增</el-button
          >
        </div>
        <!-- 列表 -->
        <div class="content">
          <el-table :data="transList" stripe>
            <el-table-column
              fixed
              prop="name"
              label="传输配置名称"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              fixed
              prop="fileType"
              label="文件类型"
              :formatter="fileTypeFormat"
              min-width="120"
            >
            </el-table-column>
	          <el-table-column
			          prop="minFileSize"
			          label="最小文件（MB）"
			          min-width="100"
	          >
	          </el-table-column>
            <el-table-column
              prop="maxFileSize"
              label="最大文件（MB）"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="maxUploadNumber"
              label="最大上传个数"
              min-width="120"
            >
            </el-table-column>
            <el-table-column
              prop="objectPermission"
              label="对象操作权限"
              :formatter="permissionFormat"
              min-width="120"
            >
            </el-table-column>
	          <el-table-column
              prop="remarks"
              label="备注"
              min-width="150"
            >
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right">
              <template slot-scope="scope">
                <div class="operation">
                  <el-tooltip
                    content="查看"
                    effect="light"
                    popper-class="small-tip"
                  >
                    <el-button
                      class="action-btn look"
                      icon="el-icon-view"
                      @click="view(scope.row.id)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    content="编辑"
                    effect="light"
                    popper-class="small-tip"
                  >
                    <el-button
                      class="action-btn edit"
                      icon="el-icon-edit"
                      @click="edit(scope.row.id)"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                    content="删除"
                    effect="light"
                    popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn del"
                        icon="el-icon-delete"
                        @click="removeTrans(scope.row.id)"
                    ></el-button>
                  </el-tooltip>
                </div>
                <slot
                  name="other"
                  :data="scope.row"
                  :index="scope.$index"
                ></slot>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="footer">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :page-count="pageCount"
          >
          </el-pagination>
        </div>
      </div>
      <router-view />
    </Box>
  </div>
</template>

<script>
import Box from "@/components/pc/Box";

export default {
  name: "transmissionConfig",
  components: { Box },
  data() {
    return {
      caption: "传输配置",
      search: "",
      currentPage: 1,
      pageCount: "1",
      transList: [],
    };
  },
	watch:{
  	// 监听路由
    $route(to,from){
    	// 进入之前
    	if(to.path == '/configManage/transmissionConfig'){
    		// 如果搜索不为空时
    		if(this.search !== ''){
			    this.transSearch();
		    }else {
			    this.getList();
		    }
	    };
    }
	},
  async created() {
  	// 初始化
    await this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      await this.$Http
        .transGetList({
          currentPage: this.currentPage,
          pageSize: 8,
        })
        .then((res) => {
          this.pageCount = res.data.pageCount;
          this.transList = res.data.list;
        });
    },
    // 查询
    async transSearch() {
      await this.$Http
        .transSearch({
          currentPage: this.currentPage,
          pageSize: 8,
          name: this.search,
        })
        .then((res) => {
          this.pageCount = res.data.pageCount;
          this.transList = res.data.list;
        });
    },
    // 重置
    reset() {
      this.search = "";
      this.getList();
    },
	  // 格式化权限
    permissionFormat(row) {
      return row.objectPermission == 1 ? "公共读" : "私有";
    },
	  // 格式化图片视频参数
    fileTypeFormat(row) {
       return row.fileType == '0' ? '图片': row.fileType == '1' ? '视频' : '图片和视频'
    },
    // 分页
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getList();
    },
    // 查看
    view(id) {
      this.$router.push({ path: '/configManage/transmissionView' , query:{id:id} });
    },
    // 编辑
    edit(id) {
      this.$router.push({ path: '/configManage/transmissionEdit' , query:{id:id} });
    },
	  // 删除
	  removeTrans(id){
		  this.$confirm("确认删除该传输配置吗？", "提示", {
			  confirmButtonText: "确定",
			  cancelButtonText: "取消",
			  type: "warning",
		  }).then(() => {
			  this.$Http.transDelete({
						  id: id,
					  })
					  .then((res) => {
						  if (res.code !== "SUCCESS") {
							  return this.$message({
								  type: "info",
								  message: "传输删除失败!",
							  });
						  } else {
							  this.getList();
							  return this.$message({
								  type: "success",
								  message: "传输删除成功",
							  });
						  }
					  });
		  }).catch(() => {
			  this.$message({
				  type: "info",
				  message: "已取消删除",
			  });
		  });
	  }
  },
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";
</style>

